import React, { useState, useEffect } from "react";
import Constants from "expo-constants";
import {
  Button,
  Text,
  TextInput,
  View,
  ScrollView,
  Pressable,
  StyleSheet,
  Image,
  FlatList,
} from "react-native";
import { Picker } from "@react-native-picker/picker";
import axios from "axios";
import Icon from "react-native-vector-icons/AntDesign";
import Icon1 from "react-native-vector-icons/Ionicons";
import IconFontAwesome from "react-native-vector-icons/FontAwesome";
import { useNavigation } from "@react-navigation/native";
import AsyncStorage from "@react-native-async-storage/async-storage";
const myImage = require("../assets/guide.png");
const leftbutton = require("../assets/leftbutton.png");
const rightbutton = require("../assets/rightbutton.png");
const ActivityTypes = [
  "自习",
  "电影",
  "聚餐",
  "拼车",
  "拼单",
  "游戏",
  "运动",
  "旅行",
  "其他",
];
const color = [
  "#4094F7",
  "#FE6386",
  "#F6A514",
  "#FD7C42",
  "#FE655F",
  "#00B773",
  "#B758FD",
  "#03BBD1",
  "#4CA4FD",
];

const Activity = () => {
  const navigation = useNavigation();
  const [selectedActivity, setSelectedActivity] = useState("");
  const [postText, setPostText] = useState("");
  const [userInfo, setUserInfo] = useState({});
  const [activityList, setActivityList] = useState([]);
  const [refreshing, isRefresh] = useState(true);
  useEffect(() => {
    (async () => {
      const userinfo = await AsyncStorage.getItem("userInfo");
      if (userinfo) {
        setUserInfo(JSON.parse(userinfo));
      }
      await axios
        .get("http://47.111.227.58:3000/dynamic/getactivity")
        .then((res) => {
          // console.log(res.data.results);
          setActivityList(res.data.results);
          //   setDy_id(res.data.results[0].id);
        });
    })();
  }, []);

  const tagsData = ActivityTypes.map((type, index) => ({
    type: type,
    iconColorKey: `TagColor${(index % 9) + 1}`,
    color: color[index],
  }));
  const handleTagPress = (type) => {
    if (selectedActivity === type) {
      setSelectedActivity("");
    } else {
      setSelectedActivity(type);
    }
  };
  const getActivityBoardList = () => {
    axios.get('http://47.111.227.58:3000/dynamic/getActivityByBoardByTime', {
      params: {
        board: selectedActivity
      },
    })
      .then(res => {
        // console.log(res.data);
        setActivityList(res.data.results)
        isRefresh(false);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
  const handleRefresh = () => {
    isRefresh(true);
    getActivityBoardList();
  }
  useEffect(() => {
    (async () => {
      getActivityBoardList()
    })();
  }, [selectedActivity]);
  const renderItem = ({ item }) => {
    return (
      <Pressable
        onPress={() => navigation.navigate("局情", { id: item.id })}
      >
        <View style={styles.activityItem}>
          <View
            style={[
              styles.activityColor,
              { backgroundColor: color[ActivityTypes.indexOf(item.board)] },
            ]}
          >
            <Text style={styles.activityColorText}>{item.board}</Text>
          </View>
          <View style={styles.activityContent}>
            <View style={styles.activityContentTop}>
              <Text style={styles.activityContentText}>{item.desc}</Text>
            </View>
            <View style={styles.activityContentBottom}>
              <Text style={styles.activityContentBottomText1}>
                局长: {item.username}
                {/* <Icon1 name={item.icon} size={14} color={item.iconcolor}></Icon1> */}
              </Text>
              <Text style={styles.activityContentBottomText2}>
                {item.uploadTime}
              </Text>
            </View>
          </View>
        </View>
      </Pressable>
    );
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headertitle1}>已攒</Text>
        <Text style={styles.headertitle2}>273731</Text>
        <Text style={styles.headertitle1}>人</Text>
      </View>
      <Pressable onPress={() => console.log("1111")}>
        <View style={styles.guide}>
          <Image
            source={myImage}
            style={styles.guideimage}
            resizeMode="contain"
          />
        </View>
      </Pressable>
      <View style={styles.Button}>
        <Pressable
          onPress={() => navigation.navigate("我加入的局")}
          style={styles.button}
        >
          <Image
            source={leftbutton}
            style={styles.buttonimageleft}
            resizeMode="contain"
          />
        </Pressable>
        <Pressable
          onPress={() => navigation.navigate("发起攒局")}
          style={styles.button}
        >
          <Image
            source={rightbutton}
            style={styles.buttonimageright}
            resizeMode="contain"
          />
        </Pressable>
      </View>
      <View style={styles.Tags}>
        {/* <Pressable style={styles.Tag}>
          <View>
            <Icon
              name="checkcircleo"
              style={styles.TagIcon}
              size={16}
              color="#9B999C"
            ></Icon>
          </View>
          <Text style={styles.TagTitle}>有空位</Text>
        </Pressable> */}
        {tagsData.map((tagData) => (
          <Pressable
            key={tagData.type} // 使用 Tag 类型作为 key
            style={[
              styles.Tag,
              {
                backgroundColor:
                  selectedActivity === tagData.type ? tagData.color : "#FFFDF1",
              }, // 根据选中状态改变背景颜色
            ]}
            onPress={() => handleTagPress(tagData.type)}
          >
            <View style={[styles[tagData.iconColorKey]]}></View>
            <Text style={styles.TagContent}>{tagData.type}</Text>
          </Pressable>
        ))}
      </View>
      <FlatList
        data={activityList}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        refreshing={refreshing}
        onRefresh={handleRefresh}
      />
      {/* 搜索按钮 */}
      <View style={styles.searchButtonContainer}>
        <Pressable onPress={() => navigation.navigate("Search")}>
          <IconFontAwesome name="search" size={20} color="#fff" />
        </Pressable>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#FAD874",
    width: "100%",
    height: "100%",
    paddingTop: Constants.statusBarHeight,
  },
  header: {
    flexDirection: "row",
    padding: 10,
  },
  headertitle1: {
    color: "#241B23",
    fontSize: 12,
    fontWeight: "bold",
    marginTop: 10,
    textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
  },
  headertitle2: {
    color: "#F86869",
    fontSize: 20,
    fontWeight: "bold",
    marginLeft: 5,
    marginRight: 5,
    textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)',
  },
  guide: {},
  guideimage: {
    width: "94%",
    margin: 10,
    marginRight: 20,
    marginTop: -20,
  },
  Button: {
    flexDirection: "row",
    width: "100%",
    justifyContent: "space-between",
    marginTop: -25,
  },
  button: {
    width: "50%",
    marginTop: -10,
  },
  buttonimageleft: {
    width: "90%",
    marginLeft: 10,
  },
  buttonimageright: {
    width: "90%",
    marginTop: -7,
    marginLeft: 8,
  },
  Tags: {
    width: "100%",
    height: "15%",
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
  },
  TopTags: {
    flexDirection: "row",
    width: "100%",
    height: "50%",
  },
  BottomTags: {
    flexDirection: "row",
    width: "100%",
    height: "50%",
    marginTop: -10,
  },
  Tag: {
    flexDirection: "row",
    width: "18%",
    backgroundColor: "#FFFDF1",
    borderBlockColor: "#000",
    borderWidth: 2,
    borderRadius: 5,
    boxShadow: '2px 2px 2px rgba(0, 0, 0, 1)',
    margin: 10,
    marginLeft: 6,
    marginRight: 0,
    display: "flex",
    alignItems: "center",
    // padding: 5,
  },
  TagColor1: {
    width: "10%",
    height: "100%",
    backgroundColor: "#4094F7",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor2: {
    width: "10%",
    height: "100%",
    backgroundColor: "#FE6386",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor3: {
    width: "10%",
    height: "100%",
    backgroundColor: "#F6A514",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor4: {
    width: "10%",
    height: "100%",
    backgroundColor: "#FD7C42",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor5: {
    width: "10%",
    height: "100%",
    backgroundColor: "#FE655F",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor6: {
    width: "10%",
    height: "100%",
    backgroundColor: "#00B773",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor7: {
    width: "10%",
    height: "100%",
    backgroundColor: "#B758FD",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor8: {
    width: "10%",
    height: "100%",
    backgroundColor: "#03BBD1",
    display: "flex",
    alignItems: "flex-start",
  },
  TagColor9: {
    width: "10%",
    height: "100%",
    backgroundColor: "#4CA4FD",
    display: "flex",
    alignItems: "flex-start",
  },
  TagIcon: {
    color: "#9B999C",
    display: "flex",
  },
  TagTitle: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#9B999C",
    display: "flex",
  },
  TagContent: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#24201D",
    display: "flex",
    marginLeft: 12,
  },
  activityItem: {
    // width: '95%',
    // height: '15%',
    backgroundColor: "#FFFDF1",
    flexDirection: "row",
    borderBlockColor: "#000",
    borderWidth: 2,
    borderRadius: 5,
    boxShadow: '2px 2px 2px rgba(0, 0, 0, 1)',
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 5,
  },
  activityColor: {
    width: "15%",
    backgroundColor: "#B758FD",
    borderRadius: 2,
    flexDirection: "column",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
  activityColorText: {
    display: "flex",
    fontSize: 26,
    fontWeight: "bold",
    color: "#FDFDFB",
    // flexDirection: 'column',
  },
  activityContent: {
    width: "85%",
    // height: '100%',
    flexDirection: "column",
    justifyContent: "space-between",
    marginTop: 5,
    marginBottom: 5,
  },
  activityContentTop: {
    // width: '95%',
    // height: '65%',
    display: "flex",
    flexDirection: "row",
    paddingLeft: 10,
    alignItems: "center",
  },
  activityContentText: {
    display: "flex",
    fontSize: 16,
    fontWeight: "bold",
    color: "#262220",
    // marginLeft: 10,
  },
  activityContentBottom: {
    flexDirection: "row",
    // width: '95%',
    // height: '35%',
    display: "flex",
    justifyContent: "space-between",
  },
  activityContentBottomText1: {
    fontSize: 14,
    // fontWeight: 'bold',
    color: "#5A678B",
    paddingLeft: 10,
  },
  activityContentBottomText2: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#797572",
    paddingLeft: 10,
    paddingRight: 10,
  },
  searchButtonContainer: {
    position: "absolute",
    flexDirection: "row",
    right: 10,
    bottom: 10,
    backgroundColor: "#FD6A63",
    padding: 10,
    borderRadius: 25,
    // width: 150,
    alignItems: "center",
  },
});

export default Activity;
